<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.导入Vue包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    
    <!-- 2.创建一个要控制的区域 -->
    <div id="app">
        <h4>{{ msg }}</h4>
        <input type="button" :title="title1" value="动起来" @click="active">
        <input type="button" :title="title2" value="静止" @click="stop">
    </div>

    <script>
        // 注意在vm实例中，想要获取data中的数据，或者想要调用methods中的方法，必须使用this.数据属性名
        // 或this.方法名来进行访问，这里的this，就表示我们new出来的vm的实例
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '欢度国庆70周年！',
                title1: '动起来',
                title2: '静止',
                intervalId: null
            },
            // 给[动起来]，绑定一个点击事件 v-on @
            // 实现跑马灯效果：拿到msg字符串，然后调用字符串的substring方法 来进行字符串的截取操作
            // 把第一个字符截出来放到字符串最后，并且设置定时器让它能够一直运行
            methods: {
                active(){
                    // console.log(this.msg)
                    // // 获取到第一个字符
                    // var start = this.msg.substring(0,1)
                    // // 获取第一个字符后的所有字符
                    // var end = this.msg.substring(1)
                    // // 重新拼接得到新的字符串，并赋值给msg
                    // // 因为Vue是响应式的，所以当我们把msg进行改变之后页面也会自动刷新数据
                    // this.msg = end + start                

                    if(this.intervalId != null) return;
                    // 这里的箭头函数就是为了解决this指针问题
                    this.intervalId = setInterval( () => {
                         // 获取到第一个字符
                    var start = this.msg.substring(0,1)
                    // 获取第一个字符后的所有字符
                    var end = this.msg.substring(1)
                    // 重新拼接得到新的字符串，并赋值给msg
                    // 因为Vue是响应式的，所以当我们把msg进行改变之后页面也会自动刷新数据
                    this.msg = end + start    
                    },400)
                },
                stop(){
                    //当定时器被情清空时我们也要把intervalId清空，才能保证下一层能够运行active中的动起来方法
                    this.intervalId = clearInterval(this.intervalId)
                }
            }

        })
    </script>
</body>
</html>